<template>
  <div
    class="tree"
    style="border-right: 1px solid #ebeef1"
  >
    <div class="findEdit">
      <el-select v-model="filterSelectText" v-if="switchValue" placeholder="请选择" clearable>
        <el-option
          v-for="item in typeSelect"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-input
        style="width:66% !important;"
        v-if="switchValue"
        placeholder="请输入关键字"
        prefix-icon="el-icon-search"
        v-model="filterText"
      >
      </el-input>
    </div>
    <div class="box-card">
      <el-scrollbar>
        <el-tree
          draggable
          :allow-drop="allowDrop"
          :allow-drag="allowDrag"
          class="filter-tree"
          :data="treeData"
          :props="dataProps"
          :default-expand-all="false"
          :filter-node-method="filterNode"
          :show-checkbox="multiple"
          @node-drag-end="handleDragEnd"
          @node-click="handleNodeClick"
          ref="tree">
          <!--          右键菜单打开-->
          <!--          @node-contextmenu="rightClick"-->

          <!--          树图片需要时开启-->
          <!--          <span class="custom-tree-node" slot-scope="{ node, data }">-->
          <!--              <svg class="iconfont" aria-hidden="true">-->
          <!--                <use :xlink:href=getIconFont(data)></use>-->
          <!--              </svg>-->
          <!--             {{ node.label }}-->
          <!--          </span>-->
          <!--双击实现树编辑-->
          <span class="custom-tree-node" slot-scope="{node, data} ">
            <div class="editTree" v-if="data.level == 'end'"
                 style="display: flex;align-items: center; " :key="Math.random()">
              <el-select v-model="data.relativePos" size="mini" style="width: 26% !important;"
                         allow-create filterable>
                 <el-option
                   v-for="item in childrenOptions"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"
                   :disabled="item.disabled">
                </el-option>
              </el-select>
              {{ "x:" }}
              <el-input style="width: 26% !important;" size="mini" v-model="data.x">
              </el-input>
                {{ "y:" }}
              <el-input style="width: 26% !important;" size="mini" v-model="data.y">
              </el-input>
              <el-button
                @click="chooseSelect(data)"
                type="primary"
                icon="el-icon-check"
                circle
                :key="Math.random()"
                style=""></el-button>
            </div>
            <div v-else>
              {{ data.type }}
            </div>
          </span>
        </el-tree>
      </el-scrollbar>
      <!--    鼠标右键菜单栏-->
      <!--      <div class="dev-type-main-left">-->
      <!--        <div v-if="showRightMenu" id="menu" class="right-menu">-->
      <!--          <el-row-->
      <!--              :key="'rowIndex_' + rowIndex"-->
      <!--              v-for="rowIndex in Number(rightMenu.row)"-->
      <!--          >-->
      <!--            <el-col-->
      <!--                :key="rowIndex + '_colIndex_' + colIndex"-->
      <!--                v-for="colIndex in Number(rightMenu.col)"-->
      <!--                :span="24 / Number(rightMenu.col)"-->
      <!--                :style="getComponentStyle(rightMenu.renders, rowIndex, colIndex)"-->
      <!--            >-->
      <!--              <component-->
      <!--                  :is="getSubComponent(rightMenu.renders, rowIndex, colIndex)"-->
      <!--                  v-bind="-->
      <!--                  getSubComponentParams(rightMenu.renders, rowIndex, colIndex)-->
      <!--                "-->
      <!--                  v-on="-->
      <!--                  getSubComponentEvent(rightMenu.renders, rowIndex, colIndex)-->
      <!--                "-->
      <!--                  :multiple="false"-->
      <!--              >-->
      <!--                <span-->
      <!--                    v-html="-->
      <!--                    getSubComponentHtml(rightMenu.renders, rowIndex, colIndex)-->
      <!--                  "-->
      <!--                ></span>-->
      <!--              </component>-->
      <!--            </el-col>-->
      <!--          </el-row>-->
      <!--        </div>-->
      <!--      </div>-->
    </div>
    <div class="target-container">
      <draggable class="list-group" :list="draggedNodes">
        <div v-for="node in draggedNodes" :key="node.id" class="list-item">
          {{ node.label }}
        </div>
      </draggable>
    </div>
    <!--   空白菜单栏-->
    <!--    <div class="dev-type-main-left">-->
    <!--      <div v-if="showBlankMenu" id="menuBlank" class="blank-menu">-->
    <!--        <el-row-->
    <!--            :key="'rowIndex_' + rowIndex"-->
    <!--            v-for="rowIndex in Number(blankRender.row)"-->
    <!--        >-->
    <!--          <el-col-->
    <!--              :key="rowIndex + '_colIndex_' + colIndex"-->
    <!--              v-for="colIndex in Number(blankRender.col)"-->
    <!--              :span="24 / Number(blankRender.col)"-->
    <!--              :style="getComponentStyle(blankRender.render, rowIndex, colIndex)"-->
    <!--          >-->
    <!--            <component-->
    <!--                :is="getSubComponent(blankRender.render, rowIndex, colIndex)"-->
    <!--                v-bind="-->
    <!--                getSubComponentParams(blankRender.render, rowIndex, colIndex)-->
    <!--              "-->
    <!--                v-on="-->
    <!--                getSubComponentEvent(blankRender.render, rowIndex, colIndex)-->
    <!--              "-->
    <!--                :multiple="false"-->
    <!--            >-->
    <!--              <span-->
    <!--                  v-html="-->
    <!--                  getSubComponentHtml(blankRender.render, rowIndex, colIndex)-->
    <!--                "-->
    <!--              ></span>-->
    <!--            </component>-->
    <!--          </el-col>-->
    <!--        </el-row>-->
    <!--      </div>-->
    <!--    </div>-->
  </div>
</template>
<script>
import baseComp from "./baseComp";
import draggable from 'vuedraggable';

let that = null;

export default {
  components: {
    draggable,
  },
  name: "commonEditingTree",
  props: [
    "dicData",
    "switchValue",
    "switchSelectValue",
    "multiple",
    "event",
    "dicUrl",
    "dicMethod",
    "dicQueryConfig",
    "dicFormatter",
    "dataProps",
    // "rightMenu",
    // "blankRender",
    // "nodeRConf",
    // "blankRConf",
  ],
  extends: baseComp,
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    filterSelectText(val) {
      this.$refs.tree.filter(val);
    },
    dicData: {
      handler(val) {
        this.treeData = val;
      },
      deep: true,
      immediate: true,
    },
    dicUrl: {},
    dicMethod: {},
    dicQueryConfig: [],
    rightMenu: {
      handler(val) {
      },
      deep: true,
      immediate: true,
    },
    dataProps: {
      handler(val) {
        this.dataProps = val
      },
      deep: true,
      immediate: true,
    }
  },
  mounted() {
    that = this;
    that.getInit();
  },
  data() {
    return {
      isSelected: false,
      optionValue: '0',
      childrenOptions: [{
        value: '0',
        label: '0°'
      }, {
        value: '45',
        label: '45°'
      }, {
        value: '90',
        label: '90°'
      }, {
        value: '180',
        label: '180°'
      }, {
        value: '270',
        label: '270°'
      }],
      treeData: [],
      typeSelect: [],
      filterText: "",
      filterSelectText: "",
      cateNameInput: "",
      // switchSelectValue: '',
      showRightMenu: false,
      showBlankMenu: false,
      newRightMenu: [],
      draggedNodes: [],
    };
  },
  methods: {
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      draggingNode.x = ev.clientX;
      draggingNode.y = ev.clientY;
      this.executeEvent("handleDragEnd", this.path, draggingNode);
    },
    allowDrop(draggingNode, dropNode, type) {
      // return true;
      this.executeEvent("xmlCilck", this.path, draggingNode);
      // return false;
    },
    allowDrag(draggingNode) {
      if (draggingNode.level == 3 || draggingNode.level == 2) {
        return true;
      }
    },

    chooseSelect(data) {
      this.executeEvent("constraintCilck", this.path, data);
    },
    getIconFont(data) {
      let icon = "#" + data.icon;
      return icon;
    },
    //树配置
    getInit() {
      let params = {};
      that.dicQueryConfig.forEach((item) => {
        params[item.key] = item.value;
      });
      that.$myAxios.request(that.dicMethod, that.dicUrl, params).then((res) => {
          let data = eval(that.dicFormatter)(res);
          // let resData = '';
          // if (res.data.data && res.data.data.records != null) {
          //   resData = res.data.data.records;
          // } else {
          //   resData = res.data.records;
          // }
          // for (let i = 0; i < resData.length; i++) {
          //   resData[i].type = resData[i].classify;
          // }
          // return resData;
          that.$set(that, "treeData", data)
          if (this.switchSelectValue !== "") {
            let switchSelectValue = this.switchSelectValue;
            for (const dataKey in data) {
              if (data[dataKey][switchSelectValue]) {
                this.typeSelect.push({
                  label: data[dataKey][switchSelectValue],
                  value: data[dataKey][switchSelectValue]
                });
              }
            }
            this.typeSelect.push({
              label: "全部",
              value: ""
            })
          }
        }
      )
      ;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data[this.dataProps.label].indexOf(value) !== -1;
    }
    ,
    handleNodeClick(data) {
      if (data) {
        if (data.children == null && data.level != "end") {
          let newData = JSON.parse(JSON.stringify(data));
          newData.relativePos = "0°"
          newData.sizeX = data.sizeX
          newData.sizeY = data.sizeY
          newData.x = 0
          newData.y = 0
          this.$set(newData, "level", "end");
          this.$set(data, "children", [newData]);
        } else if (data.level == "end") {
          // this.executeEvent("constraintCilck", this.path, data);
        }
      } else {
        this.executeEvent("selectTree", this.path, data);
      }
    },
    // 存在右键配置时打开
    // rightClick(event, data, node, obj) {
    //   this.showBlankMenu = false;
    //   this.showRightMenu = false; // 先把模态框关死，目的是：第二次或者第n次右键鼠标的时候 它默认的是true
    //   // 判断当前的对应属性值是否存在 当节点开启或者是属性值为*打开
    //   if (this.nodeRConf) {
    //     // let nodeRConf = this.rightMenu.nodeRConf;
    //     //加载右击菜单数据
    //     let render = this.rightMenu.render;
    //     let resRender = [];
    //     if (render.length > 0) {
    //       for (let i = 0; i < render.length; i++) {
    //         if (render[i].lableValue === data.type) {
    //           resRender.push(render[i]);
    //         }
    //       }
    //       this.rightMenu.renders = null;
    //       this.rightMenu.renders = resRender;
    //       if (resRender.length === 0) {
    //         this.showRightMenu = false;
    //       } else {
    //         this.showRightMenu = true;
    //       }
    //     } else {
    //       this.showRightMenu = true;
    //     }
    //     this.$nextTick(() => {
    //       let menu = document.querySelector(".right-menu");
    //       menu.style.left = event.layerX - 1 + "px";
    //       menu.style.top = event.layerY + 74 + "px";
    //       menu.style.width = this.rightMenu.menuWidth;
    //       menu.style.height = this.rightMenu.menuHeight;
    //       document.addEventListener("click", this.closeRightMenu);
    //     });
    //   } else {
    //     this.showRightMenu = false;
    //   }
    // }
    // ,
    // balnkClick(event, data, node, obj) {
    //   this.showRightMenu = false;
    //   this.showBlankMenu = false; // 先把模态框关死，目的是：第二次或者第n次右键鼠标的时候 它默认的是true
    //   if (this.blankRConf) {
    //     this.showBlankMenu = true;
    //     this.$nextTick(() => {
    //       let menu = document.querySelector(".blank-menu");
    //       menu.style.left = event.layerX + "px";
    //       menu.style.top = event.layerY + "px";
    //       menu.style.width = this.blankRender.menuWidth;
    //       menu.style.height = this.blankRender.menuHeight;
    //       document.addEventListener("click", this.closeBlankMenu);
    //     });
    //   } else {
    //     this.showBlankMenu = false;
    //   }
    // }
    // ,
    // changeRightMenu(val) {
    //   let menu = document.querySelector(".right-menu");
    //   menu.style.width = val.menuWidth;
    //   menu.style.height = val.menuHeight;
    //   menu.style.height = val.menuHeight;
    // }
    // ,
    // closeRightMenu() {
    //   this.showRightMenu = false;
    //   // 及时关掉鼠标监听事件
    //   document.removeEventListener("click", this.closeRightMenu);
    //   document.removeEventListener("click", this.closeBlankMenu);
    // }
    // ,
    // closeBlankMenu() {
    //   this.showBlankMenu = false;
    //   // 及时关掉鼠标监听事件
    //   document.removeEventListener("click", this.closeRightMenu);
    //   document.removeEventListener("click", this.closeBlankMenu);
    // }
    // ,
//双击节点的名称修改名称
    editCateName(data) {
      this.cateNameInput = data.name;
      this.isEdit = data.code;
      this.$nextTick(() => {
        this.$refs[data.code] && this.$refs[data.code].focus();// 获取输入框，自动获取焦点
      });
    },
    getSubComponent(dataList, rowIndex, colIndex) {
      let component = dataList.find(
        (item) =>
          (item.rowNum == "*" || item.rowNum == rowIndex) &&
          item.colNum == colIndex
      );
      return this.getComponent(component);
    }
    ,
    /**
     * 获取组件渲染参数
     * @param rowIndex  this.toolbar.custom.render
     * @param colIndex
     * @returns {string|*}
     */
    getSubComponentParams(dataList, rowIndex, colIndex) {
      let component = dataList.find(
        (item) =>
          (item.rowNum == "*" || item.rowNum == rowIndex) &&
          item.colNum == colIndex
      );
      return this.getComponentParams(component);
    }
    ,
    /**
     * 获取组件事件
     */
    getSubComponentEvent(dataList, rowIndex, colIndex) {
      let component = dataList.find(
        (item) =>
          (item.rowNum == "*" || item.rowNum == rowIndex) &&
          item.colNum == colIndex
      );
      return this.getComponentEvent(component);
    }
    ,
    /**
     * 获取组件html
     */
    getSubComponentHtml(dataList, rowIndex, colIndex) {
      let component = dataList.find(
        (item) =>
          (item.rowNum == "*" || item.rowNum == rowIndex) &&
          item.colNum == colIndex
      );
      return this.getComponentHtml(component);
    }
    ,
    /**
     * 获取组件样式 this.toolbar.custom.render
     * @param rowIndex
     * @param colIndex
     * @returns {{width: *, height: *}}
     */
    getComponentStyle(dataList, rowIndex, colIndex) {
      let component = dataList.find(
        (item) =>
          (item.rowNum == "*" || item.rowNum == rowIndex) &&
          item.colNum == colIndex
      );
      if (component) {
        return {
          width: component.width + "px",
          height: component.height + "px",
        };
      }
    }
    ,
  }
  ,
}
;
</script>
<style lang='less' scoped>

//.custom-tree-node {
//  /deep/ .el-tree-node.is-current > .el-tree-node__content {
//    color: red !important;
//  }
//}
.tree {
  width: 100%;
  height: 100%;
  position: relative;

  .editTree {
    /deep/ .el-input--mini input {
      height: 24px !important;
    }

    /deep/ .el-button {
      width: 16px !important;
      height: 16px !important;
      margin-left: 4px;
      padding: 0
    }
  }

  .findEdit {
    display: flex;
  }

  .findEdit /deep/ .el-input {
    margin: 18px 0 10px 6px;
  }

  .findEdit /deep/ .el-select {
    width: 30% !important;
  }

  .findEdit /deep/ .el-input__inner {
    // width: 202px;
    height: 34px;
    border: 1px solid #cccccc;
  }

  .findEdit /deep/ .el-input__icon {
    line-height: 32px;
  }

  .box-card {
    font-family: Source Han Sans Medium !important;
    font-weight: 420;
    font-size: 14px;
    height: 100%;
    overflow-y: auto;

    //.el-button--primary {
    //  background: #A7A7A7;
    //  border-color: #A7A7A7;
    //}

    //.el-button--primary--click {
    //  background: var(--theme_color);
    //  border-color: var(--theme_color);
    //}

    .el-button--primary.is-plain:hover {
      border-radius: 50%;
    }

    .filter-tree {
      height: 280px;

      /deep/ .el-tree-node.is-current > .el-tree-node__content {
        background-color: #f8f8f8 !important;
      }

    }
  }

  .dev-type-main-left {
    overflow: auto;
    //padding: 10px;

    .right-menu {
      z-index: 1;
      position: absolute;
      height: 100px;
      width: 100px;
      position: absolute;
      border-radius: 3px;
      border: 1px solid #ccc;
      background-color: white;

      .menu-item {
        //display: block;
        line-height: 20px;
        text-align: left;
        margin-top: 10px;
        font-size: 14px;
        color: #606266;
      }
    }

    .blank-menu {
      z-index: 1;
      position: absolute;
      height: 100px;
      width: 100px;
      position: absolute;
      border-radius: 3px;
      border: 1px solid #ccc;
      background-color: white;

      .menu-item {
        //display: block;
        line-height: 20px;
        text-align: left;
        margin-top: 10px;
        font-size: 14px;
        color: #606266;
      }
    }
  }
}

</style>
